<template>
  <div class="cat-container">
    <div class="minTable" v-for=" child in 4" :key="child" :style="{
        marginRight: child%2 == 0 ? '0%' : '1%'
    }">
      <el-table :data="catData[child]" style="width: 100%">
        <el-table-column type="index" :index="child" label="线号" width="60">
        </el-table-column>
        <el-table-column label="长*宽">
          <template slot-scope="scoped">
            {{ scoped.width }} * {{ scoped.height }}
          </template>
        </el-table-column>
        <el-table-column prop="type" label="品种"> </el-table-column>
        <el-table-column prop="thick" label="玻璃厚度"> </el-table-column>
        <el-table-column label="流程卡号">
          <template slot-scope="scoped">
            {{ scoped.optGlass.cardId }}
          </template>
        </el-table-column>
        <el-table-column label="出片规则">
          <template slot-scope="scoped">
            {{ scoped.rows.optGlass.unloadRule }}
          </template>
        </el-table-column>
        <el-table-column label="片标记">
          <template slot-scope="scoped">
            {{ scoped.rows.optGlass.tag }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getZkOnLineGlass } from "@/api/assembly/behindCage";
export default {
  data() {
    return {
      timer:null,
      catData: {
        0: [],
        1: [],
        2: [],
        3: [],
      },
    };
  },
  methods: {
    initData() {
      getZkOnLineGlass().then((res) => {
         this.catData = res.data
      });
    },
  },
  mounted() {
    this.initData();
    this.timer = setInterval(()=>{
        this.initData();
    },5000)
  },
  beforeDestroy(){
    clearInterval(this.timer)
  }
};
</script>

<style lang="less" scoped>
.cat-container {
  width: 100%;
  height: 99%;
  padding: 0.5%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .minTable {
    width: 49%;
    height: 50%;
    margin-right: 1%;
  }
}
</style>